<template>
    <div>
        <div id="qrCodeBox"></div>
    </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive, nextTick } from 'vue';
// 页面中引入
import QRCode from 'qrcodejs2-fix';

onMounted(() => {
    // 生成二维码
    getQrCode();
});

// 生成方法
const getQrCode = () => {
    // DOM 都加载完毕再执行
    nextTick(() => {
        document.getElementById('qrCodeBox').innerHTML = '';
        new QRCode(document.getElementById('qrCodeBox'), {
            text: '呱呱', // 扫码后显示的内容, 如果页面链接, 扫码后会直接跳转到链接
            width: 100, //二维码宽
            height: 100, //二维码高
        });
    });
};
</script>

<style lang="scss" scoped></style>
